<template>
<!-- 这个页面暂时无用 ，使用的是goodsDetail-->
  <div class="gd-wrap">
    <div class="gd-top">
      <a class="gd-top-left" :href="optionShop.skuUrl">
        <img :src="optionShop.skuImage"/>
      </a>
      <div class="gd-top-right">
        <div class="gd-top-name">{{optionShop.skuName}}</div>
        <div class="gd-top-des">推荐理由：{{optionShop.skuName}}</div>
        <div class="gd-top-box">
          <div class="gd-top-box-first">
            <div class="price">优惠价 <span>¥{{optionShop.ratePrice}}</span></div>
            <div class="old-price">原价 <span>¥{{optionShop.price}}</span></div>
            <div class="num">月销 <span>{{optionShop.monthSales}}</span></div>
          </div>
          <div class="gd-top-box-last">
            <div class="commission">佣金 <span>¥{{optionShop.commission}}</span></div>
            <div class="commission-bfb">佣金比例<span>{{optionShop.commissionRate}}%</span></div>
            <div class="commission-font">库存<span>{{optionShop.skuNum}}</span></div>
          </div>
        </div>
        <!-- <div class="gd-top-btn">我要推广</div> -->
        <div class="gd-top-btn-wrap">
          <div class="gd-top-btn" @click="btnToggle(1)" v-if="optionShop.entrust === '0'">购买寄样</div>
          <!-- <div class="gd-top-btn" v-else>已购寄样</div> -->
          <div class="gd-top-btn" @click="btnToggle(2)" v-if="optionShop.spread =='1'">取消选货</div>
        </div>
      </div>
    </div>
    <div class="gd-bottom">
      <div class="gd-bottom-title">
        <p :class="goodsIndex === 0 ? 'gd-p-active' : ''" @click="toggleGoods(0)">商品详情</p>
        <p :class="goodsIndex === 1 ? 'gd-p-active' : ''" @click="toggleGoods(1)">直播脚本</p>
      </div>
      <div class="gd-bottom-list" v-show="goodsIndex === 0">
        <div class="gd-bottom-center" v-for="(item,index) in imgData" :key="index">
          <img :src="item" alt="">
        </div>
      </div>
      <div class="gd-bottom-list" v-show="goodsIndex === 1">
        <div class="gd-bottom-txt">
          <div class="gd-bottom-txt-item" v-for="(item, index) in scriptData" :key="index">
            <div class="title">{{item.title}}</div>
            <div class="method">{{item.methods}}</div>
            <div class="feel">{{item.feel}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
   await store.commit('setInterIndex', 2) //保存顶级导航的路由状态
  },
  layout: 'internalouts',
  created() {
  },
  beforeDestroy(){    //离开
    document.getElementsByTagName("body")[0].style.background = '#f4f4f4';
  },
  mounted() {
    document.getElementsByTagName("body")[0].style.background = '#fff';
    // this.initKline()
  },
  components: {
  },
  data() {
    return {
      goodsIndex: 0,
      btnIndex:0, //btn按钮的切换状态
      scriptData:[ // 脚本数据
        {
          title: '0-1min聚人',
          methods: '营销方法：不断包装、渲染产品与品牌的产地、工艺、背景等，但不说具体产品，引发观众好奇，吸引观看。与街头表演聚人，吸引路人围观，后续卖货同理。',
          feel: '观众心理感受：卖的到底是啥？瞧瞧？'
        },
        {
          title: '1-2min留客',
          methods: '营销方法：通过神秘大礼、现场抽奖等留住观众不转台。',
          feel: '观众心理感受：看看能不能中个奖？'
        },
        {
          title: '2-6min锁客',
          methods: '营销方法：通过大量模拟产品使用场景，激发用户需求。',
          feel: '观众心理感受：是啊，这些场景我都经历过，不用挺麻烦，用了好像确实挺方便？'
        },
        {
          title: '6-10min举证',
          methods: '营销方法：通过专家证言、权威认证、产品试验等证明产品能满足观众需求。',
          feel: '观众心理感受：这东西好像还不错？'
        },
        {
          title: '10-13min说服',
          methods: '营销方法：通过竞品分析、产品对比等打消观众疑虑，帮观众做选择。',
          feel: '观众心理感受：性价比挺高，可以试试？'
        },
        {
          title: '13-14min催单',
          methods: '营销方法：通过礼品赠送、折扣礼金、增值服务等引诱观众下单。',
          feel: '观众心理感受：有优惠，赶紧买！'
        },
        {
          title: '14-15min逼单',
          methods: '营销方法：通过高频的原价与现价对比、活动期限、名额紧张等反复提醒用户下单。',
          feel: '观众心理感受：买了占便宜，不买没机会了。'
        }
      ],
      optionShop:{},
      goodsId:'', //获取到商品ID
      imgData:[], //商品详情的图片列表
      flag:true, //控制取消选货的状态
    }
  },
  created(){
    this.goodsId = this.$route.query.id;  //页面初始化的时候，获取到商品ID
  },
  methods: {
    toggleGoods(index) {
      this.goodsIndex = index;
    },
    btnToggle(index){
      this.btnIndex = index;
      if(index === 1){ //跳转到寄样管理,日后还做个判断,没有填写寄样地址时,要回到账户管理下的基本信息，填写寄样地址
        this.sendEntrustGoods(); //购买寄样
        this.$router.push({
          path:'pickGoodsHall/goodsManagement',
        }) 
      }else if(index === 2){
        this.cancelSpreadGoods(); //取消选货
      }
    },
    getData(){ //商品详情
      let params = {
        id:this.goodsId //拿到对应的商品ID,传给后台
      }
      this.$axios.$post('goodsDetail',params).then(res => {
        if(res.status === 200 ){
          this.optionShop = res.obj;
          this.flag = res.obj.spread === '0' ? true :  false; //初始化接口判定 0代表取消选货 1代表没有取消选货
          var imgs = res.obj.skuIntroduceImg.substring(0,res.obj.skuIntroduceImg.length-1);
          this.imgData = imgs.split(',');
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
      })
    },
    sendEntrustGoods(){ //商品详情-购买寄样
      let params = {
        goodsId:this.goodsId //拿到对应的商品ID,传给后台
      }
      this.$axios.$post('sendEntrustGoods',params).then(res => {
        if(res.status === 200 ){
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败')
      })
    },
    cancelSpreadGoods(){ //取消选货
      let params = {
        goodsId:this.goodsId //拿到对应的商品ID,传给后台
      }
      this.$axios.$post('cancelSpreadGoods',params).then(res => {
        if(res.status === 200 ){
          this.$message.success(res.msg);
          this.optionShop.spread='0';
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败')
      })
    },
  },
  mounted(){
    this.getData(); //初始化的商品详情数据
  }
}
</script>

<style scoped>
  .gd-wrap {
    width: 1200px;
    margin: 20px auto 0 auto;
  }
  .gd-top {
    display: flex;
    align-items: center;
  }
  .gd-top-left {
    width: 400px;
    height: 400px;
  }
  .gd-top-left img {
    width: 100%;
    height: 100%;
  }
  .gd-top-right {
    flex: 1;
    margin-left: 50px;
  }
  .gd-top-name {
    color: #333;
    font-size: 18px;
  }
  .gd-top-des {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin-top: 24px;
  }
  .gd-top-box {
    width: 708px;
    background: #f4f4f4;
    margin-top: 25px;
  }
  .gd-top-box-first {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666;
    border-bottom: 1px dashed #e3e3e3;
    height: 85px;
    padding: 0 20px;
  }
  .gd-top-box-last {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666;
    height: 85px;
    padding: 0 20px;
  }
  .gd-top-box-last .commission-font span{
    color: #de1e1e;
    font-size: 16px;
  }
  .gd-top-box-first>div, .gd-top-box-last>div {
    width: 180px;
  }
  .gd-top-box-first>div span, .gd-top-box-last>div span {
    margin-left: 30px;
  }
  .gd-top-box-first .price span, .gd-top-box-last .commission span{
    color: #de1e1e;
    font-size: 24px;
  }
  .gd-top-box-first .num span {
    color: #de1e1e;
  }
  .commission-bfb span{
    color: #0096e6;
    font-size: 24px;
  }
  .gd-top-box-first .old-price span{
    text-decoration: line-through;
  }
  .gd-top-btn-wrap{
    display:flex;
  }
  /* .gd-top-btn-wrap .active{
    background:#0096e6;
    color:#ffffff;
  } */
  .gd-top-btn {
    width: 150px;
    height: 44px;
    background:#0096e6;
    color:#ffffff;
    text-align: center;
    border:1px solid #0096e6;
    box-sizing:border-box;
    line-height: 44px;
    font-size: 18px;
    border-radius: 100px;
    margin-top: 24px;
    user-select: none;
    cursor: pointer;
  }
  .gd-disabled {
    width: 150px;
    height: 44px;
    text-align: center;
    border:1px solid gainsboro;
    box-sizing:border-box;
    line-height: 44px;
    font-size: 18px;
    border-radius: 100px;
    margin-top: 24px;
    user-select: none;
    background-color: gainsboro !important; 
		cursor: not-allowed !important;
		color:#ffffff !important;
    pointer-events:none;
  }
  .gd-disabled1 {
    width: 150px;
    height: 44px;
    text-align: center;
    border:1px solid gainsboro;
    box-sizing:border-box;
    line-height: 44px;
    font-size: 18px;
    border-radius: 100px;
    margin-top: 24px;
    user-select: none;
    background-color: gainsboro !important; 
		cursor: not-allowed !important;
		color:#ffffff !important;
    pointer-events:none;
    margin-left:105px;
  }
  .gd-top-btn:hover{
     background:#66B1FF;
  }
  .gd-top-btn:nth-child(2){
    margin-left:105px;
  }
  .gd-bottom {
    margin-top: 50px;
  }
  .gd-bottom-title {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #0096e6;
    background: #f4f4f4;
    display: flex;
  }
  .gd-bottom-title p {
    font-size: 16px;
    color: #666;
    width: 120px;
    line-height: 44px;
    height: 44px;
    text-align: center;
    cursor: pointer;
  }
  .gd-p-active {
    background: #0096e6;
    color: #fff !important;
  }
  .gd-bottom-list {
    margin-top: 20px;
    background: #fff;
  }
  .gd-bottom-list img{
    width: 100%;
  }
  .gd-bottom-txt {
    margin-left: 25px;
  }
  .gd-bottom-txt-item {
    margin-bottom: 35px;
    font-size: 14px;
    color: #666;
  }
  .gd-bottom-txt-item .title {
    color: #333;
  }
  .gd-bottom-txt-item .method {
    margin-top: 15px;
    line-height: 1.5;
  }
  .gd-bottom-txt-item .feel  {
    margin-top: 5px;
  }
  .gd-bottom-center{
    width:733px;
    height:722px;
    margin:0 auto;
  }
  .gd-bottom-center img{
    width: 100%;
    height: 100%;
    display:block;  
  }
</style>
